<template>
  <view class="x-home-swiper">
    <swiper class="imageContainer" autoplay interval="2000" circular indicator-dots="true" indicator-color="rgba(0, 0, 0, 0.5)" indicator-active-color="#FFFFFF" >
      <block v-for="(item,index) in detail.data" :key="index">
        <swiper-item class="item" @click="handleClickDetail(item)">
          <x-image :src="formatOss(item.imgUrl)" />
        </swiper-item>
      </block>
    </swiper>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
import navigateTo from '@/utils/x-navigate';

export default {
  name: 'XGoodsHomeSwiper',
  components: {
    XImage
  },
  props: {
    detail: {
      type: Object,
      default: () => {}
    },
    sourcePageType: {
      type: [String, Object],
      default: ''
    },
    sourcePageId: {
      type: [String, Object],
      default: ''
    },
    source: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      pre: ''
    };
  },
  watch: {

  },
  onLoad() {

  },
  onHide() {

  },
  created() {
    const windowInfo = wx.getWindowInfo();
    this.$emit('mounted', (250 + 8) / (375 / windowInfo.windowWidth), this.detail);
    // this.setHeight();
  },
  methods: {
    handleClickDetail(item) {
      navigateTo(item, {
        sourcePageType: this.sourcePageType,
        sourcePageId: this.sourcePageId,
        source: this.source
      });
    },
    // 格式化图片
    formatOss(url) {
      return this.$tools.formatOss(url);
    },
    onDetail(item) {
      /**
       * 0-商品详情
       1-领券中心、
       2-活动补贴、
       3-排行榜聚合、
       4-某个店铺首页、
       5-源头工厂、
       **/
      if (item.specialType === 0) {
        const productId = JSON.parse(item.specialParam).productId;
        uni.navigateTo({
          url: `/pages/transit-product/index?productId=${productId}`
        });
      } else if (item.specialType === 1) {
        uni.navigateTo({
          url: '/packages/coupon/coupon-centre/index'
        });
      } else if (item.specialType === 2) {
        uni.navigateTo({
          url: '/packages/activity/subsidy/list'
        });
      } else if (item.specialType === 3) {
        // const id = JSON.parse(item.specialParam).levelSecondCategoryId;
        uni.navigateTo({
          url: '/packages/ranking/index/index'
        });
      } else if (item.specialType === 4) {
        const storeId = JSON.parse(item.specialParam).storeId;
        uni.navigateTo({
          url: `/packages/store/index?storeId=${storeId}`
        });
      } else if (item.specialType === 5) {
        uni.navigateTo({
          url: '/packages/activity/source-factory/index'
        });
      } else {
        // 不做任何处理
      }
    },
    setHeight() {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('.x-home-swiper').boundingClientRect(data => {
          this.$emit('mounted', data.height, this.detail);
        }).exec();
      });
    }
  }
};
</script>

<style lang="scss">
.x-home-swiper{
  width: 343px;
  height: 500px;
  margin-bottom: 16px;
  border-radius: 10px;
  overflow: hidden;
  .imageContainer{
    width: 100%;
    height: 500px;
    border-radius: 10px;
    overflow: hidden;
    .item{
      border-radius: 10px;
      overflow: hidden;
      width: 100%;
      height: 500px;
    }
  }
}

</style>
